<template>
  <van-dialog class="jxgl-dialog-vip-tips" v-model="innerVisible" :show-confirm-button="false">
    <div class="vip-con">
      <template v-if="!isDelay">
        <div class="title-box">
          <div class="vip-title">{{ title }}</div>
          <div v-if="subTitle" class="vip-sub-title">{{ subTitle }}</div>
        </div>
        <div class="vip-body">
          <div v-if="isVip" class="vip-body-label">
            <p v-if="subTitle" class="delay-tips">{{ delayTips }}</p>
            <div v-else class="vip-body-label">可使用但不限于以下功能：</div>
          </div>
          <div v-else class="vip-body-label">失去以下功能使用资格：</div>
          <ul class="vip-body-val">
            <li :class="['vip-body-val-item', !isVip ? 'del-item' : '']" v-for="(vip, inx) in vips" :key="'vip_' + inx">
              <van-icon name="success" />
              <span class="vip-val-txt">{{ vip }}</span>
            </li>
          </ul>
        </div>
        <div class="vip-footer">
          <template v-if="isAdminRole">
            <div class="btn-box">
              <van-button v-if="isVip" type="info" size="small" @click.stop="beginUse">知道了</van-button>
              <van-button v-if="vipDays < 8" type="info" size="small" @click.stop="applyDelay">申请延期使用</van-button>
            </div>
            <div class="service-hotline-box">
              联系产品服务顾问：
              <a :href="'tel:' + hotline">{{ hotline }}</a>
            </div>
          </template>
          <template v-else>
            <div class="btn-box">
              <van-button v-if="isVip" type="info" size="small" @click.stop="beginUse">知道了</van-button>
            </div>
          </template>

          <div v-if="!isVip" class="log-out">
            <van-button type="info" size="small" @click.stop="logout">退出登录</van-button>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="title-box vip-title">{{ hasDelayed ? '成功提交延期申请' : '完善信息' }}</div>
        <van-icon name="cross" class="close-btn" @click="closeDelay" />
        <van-form v-if="!hasDelayed" class="vip-body" ref="userInfo" size="small" :model="userInfo" :rules="rules">
          <div class="vip-body-label center-label">请补充完善姓名和身份信息</div>
          <div class="item-label">姓名：</div>
          <van-field
            v-model="userInfo.userName"
            label=""
            :maxlength="10"
            placeholder="请输入姓名，最多10个字"
            autocomplete="off"
            show-word-limit
            :rules="rules.userName" />
          <div class="item-label">政府/社会组织：</div>
          <van-field
            v-model="userInfo.orgName"
            label=""
            :maxlength="50"
            show-word-limit
            clearable
            placeholder="请输入政府/社会组织名称，最多50个字"
            :rules="rules.orgName"
            type="textarea" />
        </van-form>
        <div v-else class="vip-body">
          <div class="vip-body-label delayed-label">稍后产品服务顾问将联系您，请保持电话畅通并注意接听电话。</div>
          <div class="service-hotline-box">
            如有问题，请直接联系产品服务顾问：
            <a :href="'tel:' + hotline">{{ hotline }}</a>
          </div>
        </div>
        <div class="vip-footer">
          <div class="btn-box">
            <van-button v-if="!hasDelayed" type="info" size="small" @click.stop="onSubmit">完成</van-button>
            <van-button v-else type="info" size="small" @click.stop="logout">好的</van-button>
          </div>
        </div>
      </template>
    </div>
  </van-dialog>
</template>
<script>
import { saveTenantDelayRecord } from '@api/api-public.js'
import { formatDate } from '@common/filters.js'
import { mapGetters } from 'vuex'
export default {
  name: 'VipDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      vips: [
        '工作纪实：应用语音识别、自然语言处理技术，提供方便快捷的纪实功能',
        '日常管理：实现日常考勤统计、请销假登记审批等',
        '平时考核：内置平时考核模块，自动输出平时考核登记表',
        '机构管理：实现部门、用户、角色、职位权限等内容的自定义管理',
        '预置模型：预置指标模型、考核模板，可以一键勾选使用',
        '模型自定义：自定义评价方式、评价审批流程、指标体系，建立个性化考核模板和指标模型',
        '自动归集：考核数据自动归集汇总，实时查看考核进度，管控考核流程',
        '绩效画像：考核结束后，系统自动形成个人绩效分析报告，为个人绩效精准画像',
        '......',
      ],
      hotline: '0371-65356670-5141',
      isDelay: false,
      hasDelayed: false,
      userInfo: {
        userId: localStorage.userId,
        userName: '',
        orgName: '',
      },
      rules: {
        userName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        orgName: [{ required: true, message: '政府/社会组织不能为空', trigger: 'blur' }],
      },
      title: '',
      subTitle: '',
      innerVisible: false,
    }
  },
  computed: {
    ...mapGetters('role', ['isAdminRole', 'isMainRole', 'isOrgRole', 'leftNavMenus']),
    vipDays() {
      return this.$store.getters['role/vipDays']
    },
    showClose() {
      return this.isDelay
    },
    isVip() {
      return this.vipDays > 0
    },
    delayTips() {
      let tips = ''
      if (this.vipDays > 7) {
        tips = `账号试用日期剩余 ${this.vipDays} 天，可以放心使用以下功能：`
      } else if (this.vipDays > 0) {
        tips = '账号试用日期即将到期，请申请延期并继续使用以下功能：'
      } else {
        tips = '账号试用日期已到期，请申请延期使用'
      }
      return tips
    },
  },
  watch: {
    visible(val) {
      this.innerVisible = val
    },
  },
  created() {
    if (this.isAdminRole) {
      this.initVip()
    }
  },
  methods: {
    beginUse() {
      this.closeDialog()
    },
    closeDialog() {
      this.$emit('close', false)
      this.isDelay = false
      this.hasDelayed = false
      this.innerVisible = false
      this.$emit('update:visible', false)
    },
    logout() {
      if (!this.isVip) {
        this.$dialog
          .confirm({ message: '确定要退出登录?' })
          .then(() => {
            this.closeDialog()
            if (!['flutter-android', 'flutter-ios', 'flutter'].includes(localStorage.platform)) {
              localStorage.clear()
              sessionStorage.clear()
              this.$router.push('/login')
            } else {
              localStorage.clear()
              sessionStorage.clear()

              window.flutter_inappwebview.callHandler('logOut', '')
            }
          })
          .catch(() => {})
      } else {
        this.closeDialog()
      }
    },
    onSubmit() {
      this.$refs.userInfo
        .validate()
        .then(() => {
          this.saveDelayRecord()
        })
        .catch(() => {})
    },
    async saveDelayRecord() {
      const { status } = await saveTenantDelayRecord(this.userInfo)
      if (status === 200) {
        this.isDelay = true
        this.hasDelayed = true
      }
    },
    applyDelay() {
      this.isDelay = true
    },
    closeDelay() {
      if (this.hasDelayed) {
        this.logout()
      } else {
        this.isDelay = false
        this.hasDelayed = false
      }
    },
    getExpiredTime() {
      let expiredTime = ''
      if (localStorage.userInfo && JSON.parse(localStorage.userInfo)) {
        const userInfo = JSON.parse(localStorage.userInfo)
        expiredTime = userInfo.endTime || ''
        expiredTime = expiredTime ? formatDate(new Date(expiredTime), 'yyyy-MM-dd hh:mm') : '已'
      }
      return expiredTime
    },
    initVip() {
      const expiredTime = this.getExpiredTime()
      if (this.isFirstLogin) {
        this.subTitle = this.vipDays > 0 ? '' : `（${expiredTime}到期）`
        this.title = this.vipDays > 0 ? '👏 终于等到您，欢迎使用“互联网+公务员考核”在线平台' : '💎试用体验•已到期'
        this.innerVisible = true
      } else {
        // console.log('expiredTime :>> ', expiredTime)
        this.subTitle = `（${expiredTime}到期）`
        this.title = this.vipDays > 0 ? `💎试用体验•剩余 ${this.vipDays} 天可用` : '💎试用体验•已到期'
        this.innerVisible = this.vipDays < 8 && this.$store.state.role.isAgainLogin
        this.$store.state.role.isAgainLogin = false
      }
    },
    // showVipTips(bool) {
    //   const expiredTime = this.getExpiredTime()
    //   if (this.vipDays > 0) {
    //     this.title = `💎试用体验•剩余 ${this.vipDays} 天可用`
    //   } else {
    //     this.title = '💎试用体验•已到期'
    //   }
    //   this.expiredTime = `（${expiredTime}到期）`
    //   this.showVip = bool
    // },
  },
}
</script>
<style lang="scss" scoped>
.jxgl-dialog-vip-tips {
  .van-dialog__content {
    .vip-con {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 10px;
      .title-box {
        margin-bottom: 20px;
      }
      .vip-title {
        text-align: center;
        font-size: 16px;
        color: #333;
      }
      .close-btn {
        position: absolute;
        right: 20px;
        top: 15px;
        font-size: 18px;
      }
      .vip-sub-title {
        margin-top: 10px;
        text-align: center;
      }
      .vip-body {
        min-width: 50%;
        margin: 0 auto;
        margin-bottom: 20px;
        .delay-tips {
          text-align: center;
          font-size: 14px;
          margin-bottom: 10px;
        }
        &-label {
          font-size: 14px;
          margin-bottom: 20px;
          color: #666;
          text-align: left;
          &.delayed-label {
            margin-top: 30px;
          }
          .red {
            color: #e25353;
          }
          .larger-txt {
            font-size: 16px;
          }
        }
        &.van-form {
          min-width: 100%;
          padding: 0 10px;
          .vip-body-label {
            margin-bottom: 20px;
            &.center-label {
              text-align: center;
            }
          }
          .item-label {
            margin-bottom: 5px;
            margin-top: 5px;
            font-size: 14px;
            color: #666666;
          }
        }
        .service-hotline-box {
          margin-bottom: 30px;
          text-align: center;
          text-align: center;
          margin-top: 10px;
          font-size: 14px;
          a {
            color: #777;
          }
        }
        &-val {
          max-height: 30vh;
          overflow-y: auto;
        }
        .vip-body-val-item {
          // margin-left: 20px;
          font-size: 12px;
          line-height: 18px;
          margin-bottom: 8px;
          color: #666;

          &.del-item {
            text-decoration: line-through;
          }
          .van-icon-success {
            font-size: 16px;
            padding-right: 5px;
          }
        }
      }

      .vip-footer {
        .service-hotline-box {
          text-align: center;
          color: #888;
          text-align: center;
          margin-top: 10px;
          font-size: 12px;
          a {
            color: #777;
          }
        }
        .btn-box {
          text-align: center;
          .van-button {
            padding: 10px 25px;
            min-width: 100px;
            margin: 0 5px;
          }
        }
        .log-out {
          margin-top: 10px;
          text-align: center;
        }
      }
    }
  }
}
</style>
